<template>
  <view class="page">
    <view class="header">
      <view class="avatar-line">
        <view class="avatar" :style="`--img: url(${avatar})`"></view>
      </view>
      <view class="username-line">
        <view class="username-box">
          <view class="username">{{ username }}</view>
          <view
            v-show="sex.length"
            class="sex"
            :style="`--bg: ${
              sex == '男' ? 'rgb(0, 170, 255)' : 'rgb(255, 170, 200)'
            }; --img: url(${
              base_url +
              (sex == '男' ? '/static/boy-icon.svg' : '/static/girl-icon.svg')
            }); --bgs: ${sex == '男' ? '40%' : '50%'};`"
          ></view>
        </view>
      </view>
      <view class="info-line">
        <view class="info-box">
          <view class="like" @click="toFansPg('like')">
            <view class="like-num">{{ love }}</view>
            <view class="text">关注</view>
          </view>
          <view class="belike" @click="toFansPg('belike')">
            <view class="belike-num">{{ fans }}</view>
            <view class="text">粉丝</view>
          </view>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="btn-line">
        <view class="btn" style="--bg: rgb(220, 242, 165)">
          <view
            class="icon"
            :style="`--img: url(${base_url + '/static/collect.jpg'})`"
          ></view>
          <view class="text">我的收藏</view>
        </view>
        <view class="btn" style="--bg: rgb(255, 178, 99)">
          <view
            class="icon"
            :style="`--img: url(${base_url + '/static/setting.jpg'})`"
          ></view>
          <view class="text">设置</view>
        </view>
      </view>
      <view class="btn" @click="toInfoPg">个人信息</view>
      <!-- <view class="btn">求助记录</view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { base_url } from "../../api/config";
import { user } from "../../service/user";

// 用户信息
let avatar = ref("/static/default_avatar.jpg");
let username = ref("");
let sex = ref("男");

// 关注信息
let love = ref(0);
let fans = ref(0);

function toFansPg(type) {
  uni.navigateTo({
    url: "/pages/user/fans?type=" + type,
  });
}

function toInfoPg() {
  uni.navigateTo({
    url: "/pages/user/info",
  });
}

async function getUserInfo() {
  const data = await user.getUserInfo();
  if (data.avatar) {
    if (data.avatar.startsWith("http")) {
      avatar.value = data.avatar;
    } else {
      avatar.value = base_url + data.avatar;
    }
  }
  username.value = data.username || "";
  sex.value = data.sex || "";
}

async function getFollowInfo() {
  const data = await user.followInfo();
  love.value = data.followCount || 0;
  fans.value = data.beFollowCount || 0;
}

async function getPageInfo() {
  getUserInfo();
  getFollowInfo();
}
getPageInfo();
</script>

<style scoped lang="less">
.page {
  width: 100vw;
  min-height: 100vh;
  background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  .header {
    width: 100%;
    height: 75vw;

    .avatar-line {
      width: 100%;
      height: 50vw;
      position: relative;

      .avatar {
        --size: 20vw;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-image: var(--img);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }

    .username-line {
      .username-box {
        font-size: 4vw;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2vw;

        .sex {
          width: 6vw;
          height: 4vw;
          background-color: var(--bg);
          background-image: var(--img);
          background-size: var(--bgs);
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 2vw;
        }
      }
    }

    .info-line {
      width: 100%;
      margin-top: 5vw;

      .info-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10vw;

        .like,
        .belike {
          text-align: center;
          position: relative;

          .text {
            font-weight: 900;
          }
        }

        .like::after {
          content: "";
          display: block;
          width: 0.3vw;
          height: 3vw;
          background-color: #888;
          position: absolute;
          top: 50%;
          right: -5vw;
          transform: translateY(-50%);
        }
      }
    }
  }

  .body {
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    background-color: #fff;
    border-radius: 10vw;
    padding: 8vw 5vw 0;

    .btn-line {
      display: flex;
      justify-content: space-around;

      .btn {
        width: 40vw;
        height: 20vw;
        background-color: var(--bg);
        border-radius: 5vw;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        .icon {
          --size: 10vw;
          width: var(--size);
          height: var(--size);
          background-image: var(--img);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    & > .btn {
      --h: 15vw;
      width: 100%;
      height: var(--h);
      margin: 8vw auto;
      background-color: rgb(255, 245, 234);
      text-align: center;
      line-height: var(--h);
      border-radius: var(--h);
    }
  }
}
</style>
